<template>
	<view class="user-contract">
		<view v-if="contractList.length > 0">
			<view
				class="user-contract-item"
				v-for="(item, index) in contractList"
				:key="index">
				<view class="user-contract-item-company">
					<view>甲方：{{item.baseInfo.Acompany}}</view>
					<view>乙方：{{item.baseInfo.Bcompany}}</view>
				</view>
				<view class="user-contract-item-date">
					<view>合同编号：{{item.baseInfo.order_no}}</view>
					<view>签订时间：{{item.baseInfo.createtime}}</view>
					<view>状态：{{item.baseInfo.status_text}}</view>
					<view v-if="item.baseInfo.status !== 0 && item.baseInfo.remark">审核备注：{{item.baseInfo.remark.AuditRemark}}</view>
				</view>
				<!-- <view class="user-contract-item-right" @click="previewDocument">预览合同</view> -->
				<view class="user-contract-item-btn" @click="pageTo('contractDetail?contractId=' + item.baseInfo.id)">查看详情</view>
				<!-- <view class="user-contract-item-btn" @click="previewDocument">查看详情</view> -->
			</view>
		</view>
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			无租赁合同哦~
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				contractList: []
			}
		},
		onLoad() {
			this.gatContractList()
		},
		methods: {
			/**
			 * 获取合同列表数据
			 */
			async gatContractList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/contract/list',
					data: {}
				})
				if (res.status === 1) {
					this.contractList = res.data.map(item =>{
						item.baseInfo.remark = JSON.parse(item.baseInfo.remark)
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-contract {
		padding-top: 30rpx;
		&-item{
			margin: 0 30rpx 30rpx;
			box-sizing: border-box;
			padding: 10rpx 30rpx 40rpx;
			border-top: 6rpx solid $uni-text-color-grey;
			background: $uni-bg-color;
			position: relative;
			&-company{}
			&-date{
				margin: 20rpx 0;
				color: $uni-text-color-grey2;
				font-size: $uni-font-size-sm2;
			}
			&-btn{
				height: 84rpx;
				width: 100%;
				line-height: 84rpx;
				text-align: center;
				background: $uni-color-theme;
				color: $uni-text-color-inverse;
			}
			&-right{
				margin-left: 400rpx;
				color: #00b5c4;
				margin-top: 15rpx;
			}
		}
	}
</style>
